import { IComponent } from "./base/IComponent";

export enum DividerTextPosition {
    START,
    CENTER,
    END
}

export enum DividerTextColor {
    GREEN = 'text-green',
    RED = 'text-red',
    PRIMARY = 'text-primary'
}

export interface IDividerAttributes {
    textAlign?: DividerTextPosition;
    textColor?: DividerTextColor;
    text?: string;
}

class _Divider extends IComponent {
    public static id: number = 0;
    private _element: HTMLDivElement = document.createElement("div");
    private textAlign: DividerTextPosition = DividerTextPosition.CENTER;
    private textColor: DividerTextColor = DividerTextColor.PRIMARY;

    constructor(config?: IDividerAttributes) {
        super(`divider-${_Divider.id++}`);
        if (config) {
            if (config.textColor) {
                this.textColor = config.textColor;
            }
            if (config.textAlign) {
                this.textAlign = config.textAlign;
            }
            if (config.text) {
                this._element.innerText = config.text;
            }
        }
        this._element.className = this.buildClassName();
    }

    build(_parentId?: string) {
        super._build(this._element, _parentId);
    }

    private buildClassName() {
        let className = "hr-text";
        if (this.textAlign == DividerTextPosition.START) {
            className += " hr-text-start";
        } else if (this.textAlign == DividerTextPosition.END) {
            className += " hr-text-end";
        }
        className += ` ${this.textColor}`;
        return className;
    }
}

export function Divider(config?: IDividerAttributes) {
    return new _Divider(config);
}